<!DOCTYPE html>
<html>

	<head>
		
		<meta name = "viewport" content = "width=device-width, minimum-scale=1, maximum-scale=1">
		
		<!-- META -->
		<meta charset = "utf-8">
		
		<link rel="stylesheet"  href="jquerymobile/css/themes/default/jquery.mobile-1.3.1.css" />
		<script src="jquerymobile/js/jquery.js"></script> 
		<script src="jquerymobile/js/jquery.mobile-1.3.1.js"></script>
		
		<!-- CSS -->
		<link rel = "stylesheet" href = "./iosslider/default.css" />
		<link rel = "stylesheet" media = "screen" href = "./iosslider/common.css" />
		
		<!-- JS --> 
		<script src = "./iosslider/jquery.easing-1.3.js"></script>
		
		<!-- iosSlider plugin -->
		<script src = "./iosslider/jquery.iosslider.js"></script>
		
		<script type="text/javascript">
			$(document).ready(function() {
				
				$('.iosSlider').iosSlider({
					snapToChildren: true,
					desktopClickDrag: true,
					keyboardControls: true,
					navNextSelector: $('.next'),
					navPrevSelector: $('.prev'),
					navSlideSelector: $('.selectors .item'),
					onSlideChange: slideChange
				});
				
			}); 
			
			function slideChange(args) {
				
				$('.selectors .item').removeClass('selected');
				$('.selectors .item:eq(' + (args.currentSlideNumber - 1) + ')').addClass('selected');
				
			}
		</script>
		
		<style>
			#SecondNested {
				margin-left: 10px;
			}
			
			#ThirdNested {
				margin-left: 20px;
			}
			 
			.ui-collapsible-heading .ui-icon {
			    display: none;
			}
			
		 
		</style> 


		<title>iosScripts/iosSlider demos - Full Width Collapse Height</title>
		
	</head>
	
	<body class="ui-mobile-viewport ui-overlay-c"> 
			
		<div class = 'container'>
			 
			<div class = 'iosSlider'>
			
				<div class = 'slider'>

					<div class = 'item'>
						<img src="h-slider-2-l.jpg" />
					</div>
					<div class = 'item'>
						<img src="h-slider-2-l.jpg" />
					</div> 
				
				</div>
				 
				<div class = 'selectorsBlock'>
				
					<div class = 'selectors'>
						<div class = 'item first selected'></div>
						<div class = 'item'></div> 
					</div>
					
				</div>

			</div>
						
		</div>
		
		<div data-role="content" class="jqm-content">
 		
			<div data-demo-html="true">
				<div data-role="collapsible-set" >
				
					<div data-role="collapsible">
						<h3>Specials</h3>
				        <ul data-role="listview" data-inset="false">
				        
				        	<!-- Second nested -->
				            <div data-role="collapsible">
								<h3><span id="SecondNested">Featured Packages</span></h3>
						        <ul data-role="listview" data-inset="false" >
						            <li><a id="ThirdNested" href="detail.php?und=953" data-ajax="false">Spring mystery dinner theater</a></li>
						            <li><a id="ThirdNested">Memorial day weekend</a></li>
						            <li><a id="ThirdNested">A-MAY-ZING-GOLF-PACKAGE</a></li> 
						        </ul>
							</div>
							
							<div data-role="collapsible">
								<h3><span id="SecondNested">Event Packages</span></h3>
						        <ul data-role="listview" data-inset="false">
						            <li><a id="ThirdNested">SPRING MYSTERY DINNER THEATER</a></li>
						            <li><a id="ThirdNested">MEMORIAL DAY WEEKEND</a></li>
						            <li><a id="ThirdNested">WAKE SURF NATIONAL CHAMPIONSHIPS PACKAGE</a></li> 
						            <li><a id="ThirdNested">BLUE MORPHO PACKAGE</a></li>
						            <li><a id="ThirdNested">SPECIAL DATE NIGHT PACKAGE</a></li>
						            <li><a id="ThirdNested">FALL MYSTERY DINNER THEATER</a></li>
						            <li><a id="ThirdNested">FANTASY IN LIGHTS B&B PACKAGE</a></li>
						            <li><a id="ThirdNested">NEW YEAR'S EVE PARTY PACKAGE</a></li>
						        </ul>
							</div>
							 
				        </ul>
					</div> 
				</div>
			</div> 
			
			 
</div>

		 
	</body>
	
</html>